<template>
	<view class="symbol p-20">
		<u-navbar title="我的普通种子" bgColor="#e9e9e9" safeAreaInsetTop :placeholder="true"
		leftIconColor="#000000" @leftClick="back"
		titleStyle="{fontSize: 16px;font-weight: bold;color: #000000;}">
		</u-navbar>
		<view class="number bold m-b-10">
			{{user.game_seed}}
		</view>
		<view class="f-xxs m-b-30">普通种子</view>
		<view class="flex-dection-col flex-no-horizontal">
			<u--image :src="detail.image_url" width="264" height="264" mode="scaleFill"></u--image>
		</view>
		<swiper class="swiper" :indicator-dots="true">
			<swiper-item>
				<view class="swiper-item border-box">
					<view class="f-base m-b-20 flex-no-horizontal">
						<u-icon name="info-circle" size="16" class="m-r-5"></u-icon>
						<view class="f-base bold">{{detail.title}}</view>
					</view>
					<view class="f-base m-b-20">
						<rich-text :nodes="`${detail.text}`"></rich-text>
					</view>
					<!-- <view class="f-base m-b-20">
						 转赠符需要使用种子或元气兑换，本阶段1枚种子即可兑换1张转赠符。为防止恶意炒作，转赠符会限量逐步释放，种子或元气兑换转赠符的比例将随总体种子发行数量、转赠情况动态调整。
					</view> -->
					<!-- <view class="btn f-17 text-center" @click="isConvertSymbol = true">兑换</view> -->
					<!-- <view class="btn f-17 text-center disabled">已兑换</view> -->
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item border-box">
					<view class="title flex-no-horizontal m-b-20">
						<text class="grey f-xs" :class="active === 1 ? 'active' : ''"
						@click="change(1)">收</text>
						<text class="line"></text>
						<text class="grey f-xs" :class="active === 2 ? 'active' : ''"
						@click="change(2)">支</text>
					</view>
					<view class="record" v-if="list.length">
						<view class="record-item m-b-20" v-for="(item,index) in list" :key="index">
							<view class="flex-no-horizontal record-item-title m-b-10">
								<view class="f-base">{{item.state}}</view>
								<view class="bold f-17">{{ item.type === 1 ? "+" : "-" }}{{ item.quantity }}</view>
							</view>
							<view class="grey f-xxs">{{item.time | date('yyyy-mm-dd hh:MM')}}</view>
						</view>
					</view>
					<view class="empty" v-else>
						暂无记录~
					</view>
				</view>
			</swiper-item>
		</swiper>
		<u-overlay :show="isConvertSymbol" @click="isConvertSymbol = false">
			<view class="warp">
				<view class="rect border-box" @tap.stop>
					<view class="text-center f-xl m-b-20">兑换转赠符</view>
					<view class="f-base m-b-10 text-center">是否消耗种子*1兑换转赠符*1？</view>
					<view class="f-base text-center m-b-20" style="color: #808080;"> 拥有种子数：{{user.seed}} </view>
					<view class="btn-group flex-no-horizontal f-base">
						<view class="cancel text-center"@click="isConvertSymbol = false">取消</view>
						<view class="confirm text-center" @click="convertSymbol">确定</view>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import {
		convertSymbolApi,
		quickenlogRecord,
		quickenDetail,
		gameSeed,
		gameSeedLog
	} from '../../api/collection.js'
	import {
		mapState
	} from 'vuex'
	export default {
		data () {
			return {
				active: 1, // 1收 2支
				isConvertSymbol: false,
				list: [],
				detail: {}//
			}
		},
		computed: {
			...mapState({
				user: state => state.userInfo
			})
		},
		onLoad() {
			this.onQuickenDetail();
			this.getRecordList()
		},
		methods: {
			async onQuickenDetail() {
				try {
					const res = await gameSeed()
					this.detail = res.data.data
				} catch(e) {
					uni.showToast({
						title: e.data || e.message,
						icon: 'none'
					})
				}
			},
			async convertSymbol() {
				try {
					const res = await convertSymbolApi()
					this.isConvertSymbol = false
					uni.showToast({
						title: res.data.info,
						icon: 'none'
					})
					this.$store.dispatch('getUserInfo')
					this.getRecordList()
				} catch(e) {
					this.isConvertSymbol = false
					uni.showToast({
						title: e.data || e.message,
						icon: 'none'
					})
					console.log(e)
				}
			},
			async getRecordList () {
				try{
					const res = await gameSeedLog({
						type: this.active
					})
					this.list = res.data.storelog
				} catch(e) {
					uni.showToast({
						title: e.data || e.message,
						icon: 'none'
					})
					console.log(e)
				}
			},
			change (index) {
				this.active = index
				this.getRecordList()
			},
			back () {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.symbol {
		min-height: 100%;
		background-color: #e9e9e9;

		.number {
			font-size: 43px;
		}

		.grey{
			color: #565656;
		}

		.flex-dection-col{
			flex-direction: column;
		}

		.swiper {
			margin-top: 60rpx;
			height: 630rpx;

			.swiper-item {
				height: 100%;
				background: #FFFFFF;
				background-size: 100% 100%;
				border-radius: 40rpx;
				overflow: auto;
				padding: 60rpx;
				.active{
					font-size: 19px;
					color: #000000;
					font-weight: 700;
				}

				.line{
					width: 2px;
					height: 38rpx;
					background: #c9c9c9;
					margin: 0 10px;
					display: inline-block;
				}
				.record-item{
					.record-item-title{
						justify-content: space-between;
					}
				}
				.empty{
					display: flex;
					align-items: center;
					justify-content: center;
					height: 80%;
					font-size: 14px;
				}
			}

			// ::v-deep .uni-swiper-wrapper{
			// 	overflow: auto;
			// 	.uni-swiper-dots-horizontal{
			// 		bottom: -40rpx;
			// 	}
			// }
			.btn {
				width: 300rpx;
				background: #000000;
				border-radius: 40rpx;
				color: white;
				padding: 18rpx 0;
				margin: auto;
			}

			.disabled{
				background: #9C9C9C;
			}
		}

		.warp {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;

			.rect {
				width: 85%;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 60rpx;

				.btn-group {
					justify-content: space-between;

					.cancel {
						width: 44%;
						padding: 15rpx 0;
						border-radius: 40rpx;
						border: 1px solid #000000;
					}
					.confirm{
						border: 1px solid #000000;
						background-color: #000000;
						width: 44%;
						padding: 15rpx 0;
						border-radius: 40rpx;
						color: white;
					}
				}
			}
		}
	}
</style>
